<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有用户</title>
    <!--    element-ui导入-->
    <link rel="stylesheet" href="./js/element-ui/lib/theme-chalk/index.css">

    <script src="js/vue.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <script src="./js/element-ui/lib/index.js"></script>
</head>
<style>


    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<body>
<div id="div">
    <template>
        <el-button @click="referClick" type="primary" round>刷新</el-button>
        <el-button type="text" @click="asdxDialogFormVisible = true">账户信息</el-button>
        <el-button type="text" @click="gridsDialogFormVisible = true">网格信息</el-button>
        <el-table
                :summary-method="getSummaries"
                show-summary
                height="550"
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    sortable
                    prop="age"
                    label="age"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="qty"
                    label="数量"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="buyPrice"
                    label="买入价">
            </el-table-column>
            <el-table-column
                    prop="buyState"
                    label="买入状态">
            </el-table-column>
            <el-table-column
                    prop="sellPrice"
                    label="卖出价">
            </el-table-column>
            <el-table-column
                    prop="sellState"
                    label="卖出状态">
            </el-table-column>
        </el-table>

<!--    账户对象-->
    <el-dialog  title="账户信息" :visible.sync="asdxDialogFormVisible">
        <el-row :gutter="15">
            <el-form ref="asdxForm" :model="asdxForm" :rules="rules" size="small" label-width="100px">
                <el-col :span="12">
                    <el-form-item label="group" prop="group">
                        <el-input v-model="asdxForm.group" placeholder="请输入group" :maxlength="1" :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="apikey" prop="apikey">
                        <el-input v-model="asdxForm.apikey" placeholder="请输入apikey" :maxlength="32"
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="secret" prop="secret">
                        <el-input v-model="asdxForm.secret" placeholder="请输入secret" :maxlength="64"
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <div slot="footer">
            <el-button @click="asdxDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="asdxHandelConfirm">确定</el-button>
        </div>
    </el-dialog>
<!--    网格信息-->
        <el-dialog  title="网格信息" :visible.sync="gridsDialogFormVisible">
            <el-row :gutter="15">
                <el-form ref="gridsForm" :model="gridsForm" :rules="rules" size="small" label-width="100px">
                    <el-col :span="12">
                        <el-form-item label="币种" prop="symbol">
                            <el-input v-model="gridsForm.symbol" placeholder="请输入币种" :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="数量" prop="qty">
                            <el-input v-model="gridsForm.qty" placeholder="请输入数量" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="startZone" prop="startZone">
                            <el-input v-model="gridsForm.startZone" placeholder="请输入startZone" clearable
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="endZone" prop="endZone">
                            <el-input v-model="gridsForm.endZone" placeholder="请输入endZone" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="zone" prop="zone">
                            <el-input v-model="gridsForm.zone" placeholder="请输入zone" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单次利润" prop="singleProfit">
                            <el-input v-model="gridsForm.singleProfit" placeholder="请输入单次利润" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手续费比例" prop="fee">
                            <el-input v-model="gridsForm.fee" placeholder="请输入手续费比例" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="价格小数" prop="tickSize">
                            <el-input v-model="gridsForm.tickSize" placeholder="请输入价格小数" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="数量小数" prop="lotSize">
                            <el-input v-model="gridsForm.lotSize" placeholder="请输入数量小数" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer">
                <el-button @click="gridsDialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="gridsHandelConfirm">确定</el-button>
            </div>
        </el-dialog>
    </template>
</div>
</body>
<script>

    new Vue({
        el: "#div",
        data: {
            gridsDialogFormVisible:false,
            asdxDialogFormVisible:false,
            gridsForm: {
                symbol: undefined,
                qty: undefined,
                startZone: undefined,
                endZone: undefined,
                zone: undefined,
                singleProfit: undefined,
                fee: undefined,
                tickSize: undefined,
                lotSize: undefined,
            },
            asdxForm: {
                group: undefined,
                apikey: undefined,
                secret: undefined,
            },
            rules: {
                group: [{
                    required: true,
                    message: '请输入group',
                    trigger: 'blur'
                }],
                apikey: [{
                    required: true,
                    message: '请输入apikey',
                    trigger: 'blur'
                }],
                secret: [{
                    required: true,
                    message: '请输入secret',
                    trigger: 'blur'
                }],
                symbol: [{
                    required: true,
                    message: '请输入币种',
                    trigger: 'blur'
                }],
                qty: [{
                    required: true,
                    message: '请输入数量',
                    trigger: 'blur'
                }],
                startZone: [{
                    required: true,
                    message: '请输入startZone',
                    trigger: 'blur'
                }],
                endZone: [{
                    required: true,
                    message: '请输入endZone',
                    trigger: 'blur'
                }],
                zone: [{
                    required: true,
                    message: '请输入zone',
                    trigger: 'blur'
                }],
                singleProfit: [{
                    required: true,
                    message: '请输入单次利润',
                    trigger: 'blur'
                }],
                fee: [{
                    required: true,
                    message: '请输入手续费比例',
                    trigger: 'blur'
                }],
                tickSize: [{
                    required: true,
                    message: '请输入价格小数',
                    trigger: 'blur'
                }],
                lotSize: [{
                    required: true,
                    message: '请输入数量小数',
                    trigger: 'blur'
                }],
            },
            // 表格数据
            tableData:[
                {age:"1",
                qty:20},
                {age:1,
                    qty:20},
                {age:1,
                    qty:20},
                {age:1,
                    qty:20},
                ]
        },
        methods: {
            gridsHandelConfirm(){
                this.$refs['gridsForm'].validate(valid => {

                    if (!valid) return

                    // 发送开始请求
                    axios.put("/info", this.gridsForm).then((res) => {
                        if (res.data.flag) {
                            //请求到了数据
                            this.$message({
                                message: res.data.message,
                                type: "success"
                            })
                            this.gridsDialogFormVisible=false
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                })
            },
            asdxHandelConfirm(){
                this.$refs['asdxForm'].validate(valid => {

                    if (!valid) return

                    // 发送开始请求
                    axios.post("/submit", this.asdxForm).then((res) => {
                        if (res.data.flag) {
                            //请求到了数据
                            this.$message({
                                message: res.data.message,
                                type: "success"
                            })
                            this.asdxDialogFormVisible = false
                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
                })
            },
            // 刷新按钮
            referClick(){
                axios.get("/status").then((res) => {
                    if (res.data.flag) {
                        //请求到了数据
                        this.$message({
                            message: res.data.message,
                            type: "success"
                        })
                        this.tableData=res.data.data
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index !== 0) {
                        sums[index] = 'xxx';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 次';
                    } else {
                        sums[index] = 'N/A';
                    }
                });

                return sums;
            },
            // 列的颜色
            tableRowClassName({row, rowIndex}) {
                if (row.buyState==="Filled"|| row.sellState==="Filled") return 'success-row'
                // if (rowIndex === 1) {
                //     return 'warning-row';
                // } else if (rowIndex === 3) {
                //     return 'success-row';
                // }
                return '';
            }
        },
        mounted(){
            axios.get("/getInfo").then((res) => {
              this.gridsForm=res.data.data
            })
        }

    })
</script>
</html>